<template>
	<div class="fixed-layout" :style="dataAttr.styleObj" @dragstart="dragStart" @mousedown="mouseDown" @dragend="dragEnd">
        固定容器
		<slot></slot>
	</div>
</template>

<script>
import { ref } from 'vue'
import yunApi from 'static/js/toolApi.js'
export default {
	props: {
		item: {
			type: Object,
			default: function() {
				return {}
			}
		},
        setPropsValue: {
            type: Function,
            default: null
        }
	},
	emits: ['update:item'],
	setup() {
		const dataAttr = ref({
			styleObj: {
				top: '0',
				left: '0'
			},
			status: false,
			page: {
				x: 0,
				y: 0
			},
			itemCopy: ref({})
		})
		return {
			dataAttr
		}
	},
	watch: {
		// 监听父组件数据，创建副本
		item: {
			handler(v) {
				this.dataAttr.itemCopy = JSON.parse(JSON.stringify(v))
			},
			deep: true,
			immediate: true
		},
		// 监听属性变化，然后重新修改组件的属性
		'dataAttr.itemCopy.attribute': {
			handler(v) {
				console.log('vvv', v)
				this.init()
			},
			deep: true
		},
		// 监听item复制对象，然后v-model修改父组件数据
		'dataAttr.itemCopy': {
			handler(v) {
                console.log('---', v)
				this.$emit('update:item', v)
			},
			deep: true
		},
	},
	methods: {
		init() {
			let topLeft = yunApi.getItemAttrVal(this.dataAttr.itemCopy, 'positionTopLeft')
			if (topLeft) {
				let arr = topLeft.split(',')
				this.dataAttr.styleObj.top = arr[0] + 'px'
				this.dataAttr.styleObj.left = arr[1] + 'px'
			}
		},
		mouseDown(e) {
			console.log('拖拽', e)
			console.log('--', e.pageX, e.pageY)
			this.dataAttr.page.x = e.pageX
			this.dataAttr.page.y = e.pageY
			this.dataAttr.status = true
		},
		dragEnd(e) {
			console.log('拖拽结束', e)
			console.log('--11', e.pageX, e.pageY)
			let arr = this.dataAttr.itemCopy.attribute.positionTopLeft.value.split(',')
			arr = [+arr[0] + (e.pageY - this.dataAttr.page.y), +arr[1] + (e.pageX - this.dataAttr.page.x)]
			this.dataAttr.itemCopy.attribute.positionTopLeft.value = arr.join(',')
            this.setPropsValue('positionTopLeft', arr.join(','))
		},
		dragStart(e) {
			console.log('开始')
		}
	},
	created() {
		this.init()
        console.log('setPropsValue', this.setPropsValue)
	}
}
</script>

<style scoped lang="less">
	.fixed-layout {
		position: absolute;
		top: 0;
		left: 0;
        z-index: 99;
		width: auto;
	}
</style>
